<template>
    <ZtScale>
        <screen :height="1080" title="监控平台" :textWidth="250">
            <div class="flex_row flex_between mgt_12">
                <!-- 左边 -->
                <div class="flex_column flex_between">
                    <!-- 温度卡片 -->
                    <card :width="346" :height="309" text="温度历史数据">
                        <DeparturesNumber :shift-list="historyData?.shiftList" />
                    </card>
                    <!-- 湿度卡片 -->
                    <card :width="346" :height="309" text="湿度历史数据">
                        <CheckNumber :people-list="historyData?.peopleList" />
                    </card>
                    <!-- CO2卡片 -->
                    <card :width="346" :height="314" text="CO2历史数据">
<!--                        <ArriveNumber :flow-direction-list="historyData?.flowDirectionList" />-->
                        <MyCO2></MyCO2>
                    </card>
                </div>
                <!-- 中间 -->
                <div class="flex_column">
                    <div class="flex_row flex_between mgb_12">
                        <!-- 热线Top10卡片 -->
                        <card :width="1160" :height="630" corner>
                            <div class="flex_row_center flex_between border_box pd_20 w_100 h_100">
                                <!-- 左边 -->
                                <HotlineTop10 :datas="historyData?.hotRouteList" />
                                <!-- 中间 -->
                                <div class="flex_1 flex_column_center h_100">
                                    <div class="flex_none">
                                        <div class="white fs_14 mgb_12">以连接场景数</div>
                                        <dance-number
                                            :num="accumulatedSaleTicket"
                                            :max-length="8"
                                            color="#ff7700"></dance-number>
                                    </div>
                                    <div class="flex_1 w_100">
                                        <div class="w_100 h_100">
                                            <zt-echart :opts="mapOpts" :geo-json="mapJson"></zt-echart>
                                        </div>
                                    </div>
                                </div>
                                <!-- 右侧 -->
                                <RealtimeTicketCount/>
                                <!-- <RealtimeTicketCount
                                    :sale-ticket-list="realtimeData?.saleTicketList"
                                    :check-ticket-list="realtimeData?.checkTicketList" /> -->
                            </div>
                        </card>
                    </div>
                    <div class="flex_row flex_between">
                        <!-- 基本数据卡片 -->
                        <card :width="1160" :height="314">
                            <BasicData
                                :price-list="historyData?.priceList"
                                :age-list="historyData?.ageList"
                                :sex-list="historyData?.sexList" />
                        </card>
                    </div>
                </div>
                <!-- 右边 -->
                <!-- 组合图表卡片 -->
                <card :width="346" :height="958" text="OTHER">
                    <RealtimeTicketPrice />
                    <!-- <RealtimeTicketPrice
                        :ticket-price-list="realtimeData?.ticketPriceList"
                        :ticket-type-list="realtimeData?.ticketTypeList" /> -->
                </card>
            </div>
        </screen>
    </ZtScale>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { Screen, Card, DanceNumber, ZtEchart, ZtScale } from "@ztstory/datav-core";
import { EventBusUtils } from "@ztstory/datav-core/src/utils/eventbus.util";
import { throttle } from "@ztstory/datav-core/src/utils/common.util";
import HotlineTop10 from "../components/HotlineTop10.vue";
import RealtimeTicketCount from "@/components/RealtimeTicketCount.vue";
import RealtimeTicketPrice from "../components/RealtimeTicketPrice.vue";
import BasicData from "@/components/BasicData.vue";
import DeparturesNumber from "../components/DeparturesNumber.vue";
import CheckNumber from "@/components/CheckNumber.vue";
import ArriveNumber from "@/components/ArriveNumber.vue";
import DirectionOfPeople from "@/components/DirectionOfPeople.vue";
// import mapJson from "@/assets/330000.geo.json";
import mapJson from "@/assets/school.geo.json";
// import { mapOpts } from "@/components/IndexMap";
import { mapOpts } from "@/components/indexSchoolMap";

import type {
    CountDateItem,
    CountRangeItem,
    FlowDirectionItem,
    HistoryDatas,
    RealTimeDatas,
    RouteItem,
    TicketPriceItem,
    TicketTypeItem,
} from "@/model/model";
import { DateUtils } from "@ztstory/datav-core/src/utils/date.util";
import MyCO2 from "@/components/MyCO2.vue";

// 累计销售票数
const accumulatedSaleTicket = ref(0);

// 创建循环数据
const createLoopDatas = () => {
    const datas: RouteItem[] = [];
    for (let index = 0; index < 11; index++) {
        datas.push({
            sort: (index + 1).toString(),
            routeName: `实验楼${index + 1}区`,
            count: Math.floor(Math.random() * 10).toString(),
        });
    }
    return datas;
};

// 创建柱状图数据
const createBarDatas = () => {
    const datas: CountDateItem[] = [];
    for (let index = 0; index < 8; index++) {
        const date = DateUtils.subtract(new Date(), index, "day");
        datas.push({
            timestamp: date.getDate(),
            dateFormat: DateUtils.date2String(date, "YYYY-MM-DD"),
            count: Math.floor(Math.random() * 2000).toString(),
        });
    }
    return datas;
};

// 创建饼图数据
const createPieDatas = () => {
    const datas: CountRangeItem[] = [];
    const base = [
        { Minimum: "0", Maximum: "50" },
        { Minimum: "50", Maximum: "100" },
        { Minimum: "100", Maximum: "150" },
        { Minimum: "150", Maximum: "200" },
    ];
    for (let index = 0; index < base.length; index++) {
        datas.push({
            range: base[index],
            rangeFormat: `${base[index].Minimum}-${base[index].Maximum}`,
            count: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};

// 创建折线图数据
const createLineDatas = () => {
    const datas: CountDateItem[] = [];
    for (let index = 0; index < 12; index++) {
        const format = (n: number) => {
            return n < 10 ? `0${n}` : `${n}`;
        };
        datas.push({
            timestamp: new Date().getDate(),
            dateFormat: `${format(index)}:00`,
            count: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};

// 创建流向数据
const createFlowItem = () => {
    const datas: FlowDirectionItem[] = [];
    for (let index = 0; index < 10; index++) {
        datas.push({
            target: `CO2数据${index}`,
            count: Math.floor(Math.random() *100 + 600).toString(),
        });
    }
    return datas;
};

// 创建票种数据
const createTypeItem = () => {
    const datas: TicketTypeItem[] = [];
    for (let index = 1; index < 4; index++) {
        datas.push({
            type: `类型${index}`,
            count: Math.floor(Math.random() * 1000).toString(),
            price: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};

// 创建票价数据
const createPriceItem = () => {
    const datas: TicketPriceItem[] = [];
    for (let index = 1; index < 5; index++) {
        datas.push({
            type: `方式${index}`,
            price: Math.floor(Math.random() * 1000).toString(),
        });
    }
    return datas;
};

// 历史数据
const historyData = ref<HistoryDatas>({
    hotRouteList: createLoopDatas(),
    shiftList: createBarDatas(),
    peopleList: createBarDatas(),
    priceList: createPieDatas(),
    ageList: createPieDatas(),
    sexList: [
        {
            sex: "男",
            count: "54",
        },
        {
            sex: "女",
            count: "46",
        },
    ],
    flowDirectionList: createFlowItem(),
});

// 实时数据
const realtimeData = ref<RealTimeDatas>({
    accumulateTicketCount: "0",
    saleTicketList: createLineDatas(),
    checkTicketList: createLineDatas(),
    ticketTypeList: createTypeItem(),
    ticketPriceList: createPriceItem(),
    flowDirectionList: createFlowItem(),
});

let realtimeInterval: number | undefined = 0;

// 组件挂载时执行
onMounted(() => {
    // realtimeInterval = window.setInterval(() => {
    //     accumulatedSaleTicket.value += Math.floor(Math.random() * 1000);
    // }, 1 * 1000);

    realtimeInterval = window.setTimeout(()=>{
        accumulatedSaleTicket.value += 12
    }, 1 * 1000);
});

// 组件卸载时执行
onUnmounted(() => {
    if (realtimeInterval) window.clearInterval(realtimeInterval);
});

// 窗口大小调整时触发
const onResize = throttle(() => {
    EventBusUtils.post("WindowResize");
}, 500);
window.onresize = onResize;
</script>

<style scoped lang="less"></style>
